Ext.onReady(function(){

        
        
        
var d1=[
        ['9/01/2009 12:00',0.7],
        ['10/01/2009 12:00',0.3],
        ['11/01/2009 12:00',0.4],
        ['12/01/2009 12:00',0.8],
        ];
var store = new Ext.data.SimpleStore({
            fields: [
               {name: 'fecha', type: 'date', dateFormat: 'd/m/Y H:i'},
               {name: 'ocup', type: 'float'}
            ]
        });
        
        store.loadData(d1);
        function ocup(val){
            if(val <0.8){
                return '<span style="color:green;">' + val + '</span>';
            }else{
                return '<span style="color:red;">' + val + '</span>';
            }
            return val;
        }


        // create the Grid
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
                {id:'fecha',header: "Fecha", width: 200, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y H:i:s'), dataIndex: 'fecha'},
                {header: "Tasa Ocupación (x100)", width: 200, sortable: true,renderer: ocup, dataIndex: 'ocup'},
              
            ],
            stripeRows: true,
            autoExpandColumn: 'fecha',
            height:140,
            width:400,
            title:'Tabla'
        });

        grid.render('tabla1');
});